<template>
  <div>
    <h2>Child</h2>
    <button @click="debounceHandleClick">500ms内只触发一次</button>
  </div>
</template>

<script setup>
import { onUnmounted } from 'vue'
import debounce from 'lodash/debounce'

const timer = setTimeout(() => {
  console.log('1000')
}, 1000)

const handleClick = () => {
  console.log('500ms内只触发一次')
}

const debounceHandleClick = debounce(handleClick, 500)
onUnmounted(() => {
  console.log('取消')
  clearTimeout(timer)
  debounceHandleClick.cancel()
})
</script>

<style
  lang="scss"
  scoped
></style>
